<template>
	<view class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable': weeks.disable,
		'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && isType != 'dataList',
		'uni-calendar-item--isDay_dataList': calendar.fullDate === weeks.fullDate && isType === 'dataList',
		// 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
		'uni-calendar-item--before-checked': weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked': weeks.afterMultiple,
	}" @click="choiceDate(weeks)">
		<view class="uni-calendar-item__weeks-box-item">
			<!-- <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> -->
			<view class="uni-calendar-item__weeks-box-text" :class="{
				'uni-calendar-item--isDay-text': weeks.isDay,
				'fullDate': weeks.fullDate,
				'fullDate_up_down': isType == 'dataList',
				'userLate': isdelay,
				'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && isType != 'dataList',
				// 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked': weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked': weeks.afterMultiple,
				'uni-calendar-item--disable': weeks.disable,
			}">
			{{ weeks.date }}
			<text class="date_up" v-if="dailyDate">{{ dailyDate }}</text>
			</view>
			<!-- 	<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">{{todayText}}</text> -->
			<!-- 	<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text> -->
			<!-- <text v-if="weeks.extraInfo && weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--extra': weeks.extraInfo.info,
				'uni-calendar-item--isDay-text': weeks.isDay,
				'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked': weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked': weeks.afterMultiple,
				'uni-calendar-item--disable': weeks.disable,
			}">{{ weeks.extraInfo.info }}</text> -->
			<text v-if="weeks.extraInfo && weeks.extraInfo.info" class="myInfo">{{ weeks.extraInfo.info }}</text>
		</view>
	</view>
</template>

<script>
import {
	initVueI18n
} from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const {
	t
} = initVueI18n(i18nMessages)

export default {
	emits: ['change'],
	watch: {
		date(newVal) {
			// this.cale.setDate(newVal)
			this.init(newVal)
		},
	},
	props: {
		isType: {
			type: String,
			default() {
				return ''
			}
		},
		dailyDate: {
			type: Array,
			default: () => {
				return []
			}
		},
		delayDate: {
			type: Array,
			default: () => {
				return []
			}
		},
		weeks: {
			type: Object,
			default() {
				return {}
			}
		},
		calendar: {
			type: Object,
			default: () => {
				return {}
			}
		},
		selected: {
			type: Array,
			default: () => {
				return []
			}
		},
		lunar: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		todayText() {
			return t("uni-calender.today")
		},
		isdelay() {
			const dateArray = this.delayDate;
			const targetDate = this.weeks.fullDate;
			// 直接使用 includes 检查
			const isExist = dateArray.includes(targetDate);
			return isExist
		},
		dailyDate(){
			const dailyDate = this.dailyDate;
			const targetDate = this.weeks.fullDate;
			// 直接使用 includes 检查
			const dqObj = dailyDate.find(d=> d.data == targetDate);
			return dqObj ? dqObj.num : 0
		},
	},
	methods: {
		choiceDate(weeks) {
			this.$emit('change', weeks)
		}
	}
}
</script>

<style lang="scss" scoped>
$uni-font-size-base: 14px;
$uni-text-color: #333;
$uni-font-size-sm: 12px;
$uni-color-error: #e43d33;
$uni-opacity-disabled: 0.3;
$uni-text-color-disable: #c0c0c0;
$uni-primary: #2979ff !default;

.uni-calendar-item__weeks-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.uni-calendar-item__weeks-box-text {
	font-size: $uni-font-size-base;
	color: #D8C2A6;
}

.fullDate {
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	font-size: 28rpx;
	color: #FFFFFF;
}
.fullDate_up_down {
	position: absolute;
    top: 14rpx;
    left: 50%;
    transform: translateX(-50%);
}

.uni-calendar-item__weeks-lunar-text {
	font-size: $uni-font-size-sm;
	color: $uni-text-color;
}

.uni-calendar-item__weeks-box-item {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 80rpx;
}

.uni-calendar-item__weeks-box-circle {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background-color: $uni-color-error;

}

.uni-calendar-item--disable {
	// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
	// color: $uni-text-color-disable;
}

.uni-calendar-item--isDay-text {
	// color: $uni-primary;
}

.uni-calendar-item--isDay {
	width: 60rpx;
	height: 60rpx;
	background: #C9A77B;
	border-radius: 50%;
	text-align: center;
	line-height: 60rpx;
	
	.myInfo{
		bottom: 2rpx !important;
	}
}
.uni-calendar-item--isDay_dataList {
	background: #C9A77B;
	border-radius: 50%;
}

.uni-calendar-item--checked {
	width: 60rpx;
	height: 60rpx;
	background: #C9A77B;
	border-radius: 50%;
	text-align: center;
	line-height: 60rpx;
}

.userLate {
	width: 64rpx;
	height: 64rpx;
	background: rgba(201, 167, 123, 0);
	border-radius: 50%;
	border: 2px solid #F3ECE5;
	text-align: center;
	line-height: 60rpx;
}

.userLate ::after {
	width: 31rpx;
	height: 31rpx;
	background: #F3ECE5;
	border-radius: 50%;
	text-align: center;
	line-height: 31rpx;
	content: "迟";
	position: absolute;
	display: block;
	font-weight: normal;
	font-size: 20rpx;
	color: #B99260;
	right: -5rpx;
	bottom: 5rpx;
}
.date_up {
	position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);font-size: 20rpx;color: #FFFFFF;
}

.uni-calendar-item--extra {
	color: $uni-color-error;
	opacity: 0.8;
}



.uni-calendar-item--multiple {
	background-color: $uni-primary;
	color: #fff;
	opacity: 0.8;
}

.uni-calendar-item--before-checked {
	background-color: #ff5a5f;
	color: #fff;
}

.uni-calendar-item--after-checked {
	background-color: #ff5a5f;
	color: #fff;
}
.myInfo{
	position: absolute;
	bottom: -4rpx;
	height: 34rpx;
	font-size: 20rpx;
	color: #FFFFFF;
}
</style>